<style scoped>
	.mainhome {
		height: 100%;
	}
	
	.layout {
		border: 1px solid #d7dde4;
		background: #f5f7f9;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}
	
	.layout-breadcrumb {
		padding: 10px 15px 0;
	}
	
	.layout-content {
		min-height: 200px;
		margin: 15px;
		overflow: hidden;
		background: #fff;
		border-radius: 4px;
		padding: 20px;
	}
	
	.layout-content-main {
		padding: 10px;
	}
	
	.layout-copy {
		text-align: center;
		padding: 10px 0 20px;
		color: #9ea7b4;
	}
	
	.layout-menu-left {
		background: #464c5b;
	}
	
	.layout-header {
		height: 60px;
		background: #fff;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
	}
	
	.layout-logo-left {
		width: 90%;
		height: 30px;
		background: #5b6270;
		border-radius: 3px;
		margin: 15px auto;
	}
	
	.layout-ceiling-main a {
		color: #9ba7b5;
	}
	
	.layout-hide-text .layout-text {
		display: none;
	}
	
	.ivu-col {
		transition: width .2s ease-in-out;
	}
	
	.flexclo {
		display: flex;
		flex-direction: column;
	}
	
	.flexs {
		flex: 1;
	}
</style>
<template>
	<div class="layout mainhome" :class="{'layout-hide-text': spanLeft < 5}">
		<Row type="flex" class='mainhome'>
			<Col :span="spanLeft" class="layout-menu-left mainhome">
			<Menu active-name="1" theme="dark" width="auto">
				<div class="layout-logo-left"></div>
				<MenuItem name="1">
				<Icon type="ios-navigate" :size="iconSize"></Icon>
				<router-link to='/' tag='span' class="layout-text">用户模块</router-link>
				</MenuItem>
				<MenuItem name="3">
				<Icon type="ios-paper" :size="iconSize"></Icon>
				<router-link to='/upload' tag='span' class="layout-text">上传模块</router-link>
				</MenuItem>
				<MenuItem name="4">
				<Icon type="ios-analytics" :size="iconSize"></Icon>
				<router-link to='/news' tag='span' class="layout-text">新闻模块</router-link>
				</MenuItem>

				<MenuItem name="6">
				<Icon type="person-stalker" :size="iconSize"></Icon>
				<router-link to='/product' tag='span' class="layout-text">产品管理</router-link>
				</MenuItem>

				<MenuItem name="5">
				<Icon type="person-stalker" :size="iconSize"></Icon>
				<router-link to='/login' tag='span' class="layout-text">管理员登入</router-link>
				</MenuItem>

			</Menu>
			</Col>
			<Col :span="spanRight" class="flexclo">

			<div class="layout-header">
				<Col span="12">
				<Button type="text" @click="toggleClick">
					<Row style='margin-top: 10px;'>
      						 <Col span="11" offset='1'><Icon type="navicon" size="32"></Icon></Col>
        					<Col span="6" offset='4'><h1>欢迎来到网易考拉海购管理系统</h1></Col>
   					</Row>
                        
                      
                   </Button>
				</Col>
				<Col span="6" offset='5'>
				<br>
				<Button type="warning" @click='goback'>退出</Button>
				</Col>
			</div>

			<div class="layout-content flexs">
				<!--<Tabs type="card">
				 <TabPane v-for="tab in tabs" :key="tab" :label="tab">
				 	<router-view></router-view>
				 </TabPane>

				</Tabs>-->
				<template>
					<div>
						<div v-if='login'>
							<router-view></router-view>
						</div>
						<div v-else>
							<Login></Login>
						</div>
					</div>
				</template>
			</div>
			<div class="layout-copy" align="bottom">
				2011-2016 &copy; TalkingData
			</div>
			</Col>
		</Row>
	</div>
</template>
<script>
	import Login from './components/login.vue'

	import { mapGetters, mapActions } from 'vuex'
	export default {
		data() {
			return {
				spanLeft: 5,
				spanRight: 19,
				//				tabs: ['用户模块'],
				modal1: true,
				formInline: {
					user: '',
					password: ''
				},
				ruleInline: {
					user: [
						{ required: true, message: '请填写用户名', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '请填写密码', trigger: 'blur' },
					]
				}
			}
		},
		computed: {
			...mapGetters(['login']),
			iconSize() {
				return this.spanLeft === 5 ? 14 : 24;
			}
		},
		methods: {
			...mapActions(['checkLogin']),
			toggleClick() {
				if(this.spanLeft === 5) {
					this.spanLeft = 2;
					this.spanRight = 22;
				} else {
					this.spanLeft = 5;
					this.spanRight = 19;
				}
			},
			logined() {
				this.modal1 = true
			},
			goback() {
				this.checkLogin(false)
			}
			//			handleTabsAdd(name) {
			//				console.log(1)
			//				var flag = true
			//
			//				for(let i = 0; i < this.tabs.length; i++) {
			//					if(name == this.tabs[i]) {
			//						flag = false
			//					}
			//				}
			//				if(flag) {
			//					this.tabs.push(name)
			//				}
			//				console.log(this.tabs)
			//			},
		},
		components: {
			Login,
		},
		created() {

		}
	}
</script>